<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bt3.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
  <style>
    .navbar-brand>img {
      width: 142px;
      height: 50px;
    }
    .navbar {
      height: 90px;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .container-fluid>ul {
      font-size: 18px;
      line-height: 41px;
      position: relative;
      top: 15px;
    }
    /*调整下载APP按钮的位置*/
    #d1 {
      position: relative;
      right: 5px;
    }
    /*调整下载APP按钮的样式*/
    #d1>button{
      width: 128px;
      height: 41px;
      background-color: #f16622;
      border: 0;
      border-radius: 41px;
    }
    /*调整下拉三角符号的位置*/
    .c1 {
      position: absolute;
      right: 20px;
    }
    /*设置立即下单样式*/
    #d3 {
      width: 218px;
      height: 52px;
      margin: 0;
      background-color: #f16622;
      border: 0;
      border-radius: 52px;
    }
    #d2 {
      height: 520px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<!--头部-->
<header class="container">

  <!--导航条 logo开始-->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="Brand" src="https://www.huolala.cn/rs/img/img_nav_logo.png">
        </a>
      </div>
      <!--导航条 logo结束-->
      <!--首页及分类开始-->
      <ul class="nav navbar-nav">
        <li><a href="">首页</a></li>
        <li><a href="">搬家</a></li>
        <li><a href="">大货车</a></li>
        <li><a href="">企业版</a></li>
        <li><a href="">发物流</a></li>
        <li class="c1"><a href=""><img src="https://www.huolala.cn/rs/img/ic_job_arrow_down.png"></a></li>
        <li><a href="">司机加入</a></li>
        <li><a href="">租买货车</a></li>
        <li><a href="">开发平台</a></li>
        <li><a href="">关于我们</a></li>
        <li class="c1"><a href=""><img src="https://www.huolala.cn/rs/img/ic_job_arrow_down.png"></a></li>

        <li id="d1">
            <button type="submit">
              <i>下载APP</i>
            </button>
        </li>
      </ul>
      <!--首页及分类结束-->
    </div>
  </nav>

</header>
<!--体部-->
<section class="container">
  <!--大图开始-->
  <div id="d2">
    <img src="https://www.huolala.cn/rs/img/img_banner_logistics2_new.png" class="img-responsive" alt="Responsive image">
    <ul class="nav navbar-nav">
      <li id="d3">
        <button type="submit">
          <i>立即下单</i>
        </button>
      </li>
    </ul>
  </div>
  <!--大图结束-->
</section>
<!--底部-->
<footer class="container"></footer>
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<script>
  let w = $(window).width();
  $(".navbar").css("width:"+w+"px");
</script>
</html>